import QtQuick 2.15
import QtQuick.Controls 2.15
import QtQuick.Layouts 1.15

MainView {
    id: root
    width: 800
    height:249

    property int buttonWidth: 55
    property int buttonHeight: 55

    property TextInput textInput: null
    property string lineValue: ""
    property bool isNumber: false
    property bool shifted: false
    property color btnAlphColor:"#7142ed"

    function buttonAddValue(value) {
        //if(lineValue == "0") lineValue = lineValue.substring(0, lineValue.length -1)
        lineValue = lineValue +value
        textInput.text =lineValue
    }
    function buttonClean() {
        lineValue = ""
        textInput.text =lineValue
    }
    function buttonDel() {
        lineValue = lineValue.substring(0, lineValue.length -1)
        textInput.text =lineValue
    }
    function buttonInputDone() {
        lineValue = ""
        textInput=null
    }
    function buttonDot() {
        if(isNumber){
            var temp = Number(lineValue+".");
            if(!isNaN(temp))
            {
                 buttonAddValue(".");
            }
        }
        else{
            buttonAddValue(".");
        }
    }
    function buttonMinus(){
        if(isNumber){
            var temp = -1* Number(lineValue);
            lineValue = temp.toString();
            textInput.text =lineValue
        }
        else{
            buttonAddValue("-");
        }
    }
    GridLayout{ //root中放置一个行布局，布局中放置3个方块
        id: keyBoardLayout
        anchors.centerIn: parent
        //spacing: 3 //间距
        rows: 4//行数
        columns: 12 //列数
        Button
        {
            id:btnOne
            // x: 178
            // y: 0
            width: buttonWidth
            height: buttonHeight
            background: Rectangle{
                border.width: 0
                color: "#B0B0D0"
                    }
            Layout.row:0
            Layout.column:7
            Layout.preferredWidth: buttonWidth
            Layout.preferredHeight: buttonHeight
            text: "1"
            font.pixelSize: 25
            palette.buttonText: "white"
            onClicked: {
                buttonAddValue(text)
            }
        }
        Button
        {
            id:btna
            // x: 178
            // y: 0
            width: buttonWidth
            height: buttonHeight
            background: Rectangle{
                color: btnAlphColor
                border.width: 0
                    }
            Layout.row:0
            Layout.column:0
            Layout.preferredWidth: buttonWidth
            Layout.preferredHeight: buttonHeight
            text: shifted?"A":"a"
            font.pixelSize: 25
            palette.buttonText: "white"
            onClicked: {
                buttonAddValue(text)
            }
        }
        Button
        {
            id:btnb
            // x: 178
            // y: 0
            width: buttonWidth
            height: buttonHeight
            background: Rectangle{
                border.width: 0
                color: btnAlphColor
                    }
            Layout.row:0
            Layout.column:1
            Layout.preferredWidth: buttonWidth
            Layout.preferredHeight: buttonHeight
            text: shifted?"B":"b"
            font.pixelSize: 25
            palette.buttonText: "white"
            onClicked: {
                buttonAddValue(text)
            }
        }
        Button
        {
            id:btnc
            // x: 178
            // y: 0
            width: buttonWidth
            height: buttonHeight
            background: Rectangle{
                border.width: 0
                color: btnAlphColor
                    }
            Layout.row:0
            Layout.column:2
            Layout.preferredWidth: buttonWidth
            Layout.preferredHeight: buttonHeight
            text: shifted?"C":"c"
            font.pixelSize: 25
            palette.buttonText: "white"
            onClicked: {
                buttonAddValue(text)
            }
        }
        Button
        {
            id:btnd
            // x: 178
            // y: 0
            width: buttonWidth
            height: buttonHeight
            background: Rectangle{
                border.width: 0
                color: btnAlphColor
                    }
            Layout.row:0
            Layout.column:3
            Layout.preferredWidth: buttonWidth
            Layout.preferredHeight: buttonHeight
            text: shifted?"D":"d"
            font.pixelSize: 25
            palette.buttonText: "white"
            onClicked: {
                buttonAddValue(text)
            }
        }
        Button
        {
            id:btne
            // x: 178
            // y: 0
            width: buttonWidth
            height: buttonHeight
            background: Rectangle{
                border.width: 0
                color: btnAlphColor
                    }
            Layout.row:0
            Layout.column:4
            Layout.preferredWidth: buttonWidth
            Layout.preferredHeight: buttonHeight
            text: shifted?"E":"e"
            font.pixelSize: 25
            palette.buttonText: "white"
            onClicked: {
                buttonAddValue(text)
            }
        }
        Button
        {
            id:btnf
            // x: 178
            // y: 0
            width: buttonWidth
            height: buttonHeight
            background: Rectangle{
                border.width: 0
                color: btnAlphColor
                    }
            Layout.row:0
            Layout.column:5
            Layout.preferredWidth: buttonWidth
            Layout.preferredHeight: buttonHeight
            text: shifted?"F":"f"
            font.pixelSize: 25
            palette.buttonText: "white"
            onClicked: {
                buttonAddValue(text)
            }
        }
        Button
        {
            id:btng
            // x: 178
            // y: 0
            width: buttonWidth
            height: buttonHeight
            background: Rectangle{
                border.width: 0
                color: btnAlphColor
                    }
            Layout.row:0
            Layout.column:6
            Layout.preferredWidth: buttonWidth
            Layout.preferredHeight: buttonHeight
            text: shifted?"G":"g"
            font.pixelSize: 25
            palette.buttonText: "white"
            onClicked: {
                buttonAddValue(text)
            }
        }
        Button
        {
            id:btnh
            // x: 178
            // y: 0
            width: buttonWidth
            height: buttonHeight
            background: Rectangle{
                border.width: 0
                color: btnAlphColor
                    }
            Layout.row:1
            Layout.column:0
            Layout.preferredWidth: buttonWidth
            Layout.preferredHeight: buttonHeight
            text: shifted?"H":"h"
            font.pixelSize: 25
            palette.buttonText: "white"
            onClicked: {
                buttonAddValue(text)
            }
        }
        Button
        {
            id:btni
            // x: 178
            // y: 0
            width: buttonWidth
            height: buttonHeight
            background: Rectangle{
                border.width: 0
                color: btnAlphColor
                    }
            Layout.row:1
            Layout.column:1
            Layout.preferredWidth: buttonWidth
            Layout.preferredHeight: buttonHeight
            text: shifted?"I":"i"
            font.pixelSize: 25
            palette.buttonText: "white"
            onClicked: {
                buttonAddValue(text)
            }
        }
        Button
        {
            id:btnj
            // x: 178
            // y: 0
            width: buttonWidth
            height: buttonHeight
            background: Rectangle{
                border.width: 0
                color: btnAlphColor
                    }
            Layout.row:1
            Layout.column:2
            Layout.preferredWidth: buttonWidth
            Layout.preferredHeight: buttonHeight
            text: shifted?"J":"j"
            font.pixelSize: 25
            palette.buttonText: "white"
            onClicked: {
                buttonAddValue(text)
            }
        }
        Button
        {
            id:btnk
            // x: 178
            // y: 0
            width: buttonWidth
            height: buttonHeight
            background: Rectangle{
                border.width: 0
                color: btnAlphColor
                    }
            Layout.row:1
            Layout.column:3
            Layout.preferredWidth: buttonWidth
            Layout.preferredHeight: buttonHeight
            text: shifted?"K":"k"
            font.pixelSize: 25
            palette.buttonText: "white"
            onClicked: {
                buttonAddValue(text)
            }
        }
        Button
        {
            id:btnl
            // x: 178
            // y: 0
            width: buttonWidth
            height: buttonHeight
            background: Rectangle{
                border.width: 0
                color: btnAlphColor
                    }
            Layout.row:1
            Layout.column:4
            Layout.preferredWidth: buttonWidth
            Layout.preferredHeight: buttonHeight
            text: shifted?"L":"l"
            font.pixelSize: 25
            palette.buttonText: "white"
            onClicked: {
                buttonAddValue(text)
            }
        }
        Button
        {
            id:btnm
            // x: 178
            // y: 0
            width: buttonWidth
            height: buttonHeight
            background: Rectangle{
                border.width: 0
                color: btnAlphColor
                    }
            Layout.row:1
            Layout.column:5
            Layout.preferredWidth: buttonWidth
            Layout.preferredHeight: buttonHeight
            text: shifted?"M":"m"
            font.pixelSize: 25
            palette.buttonText: "white"
            onClicked: {
                buttonAddValue(text)
            }
        }
        Button
        {
            id:btnn
            // x: 178
            // y: 0
            width: buttonWidth
            height: buttonHeight
            background: Rectangle{
                border.width: 0
                color: btnAlphColor
                    }
            Layout.row:1
            Layout.column:6
            Layout.preferredWidth: buttonWidth
            Layout.preferredHeight: buttonHeight
            text: shifted?"N":"n"
            font.pixelSize: 25
            palette.buttonText: "white"
            onClicked: {
                buttonAddValue(text)
            }
        }
        Button
        {
            id:btno
            // x: 178
            // y: 0
            width: buttonWidth
            height: buttonHeight
            background: Rectangle{
                border.width: 0
                color: btnAlphColor
                    }
            Layout.row:2
            Layout.column:0
            Layout.preferredWidth: buttonWidth
            Layout.preferredHeight: buttonHeight
            text: shifted?"O":"o"
            font.pixelSize: 25
            palette.buttonText: "white"
            onClicked: {
                buttonAddValue(text)
            }
        }
        Button
        {
            id:btnp
            // x: 178
            // y: 0
            width: buttonWidth
            height: buttonHeight
            background: Rectangle{
                border.width: 0
                color: btnAlphColor
                    }
            Layout.row:2
            Layout.column:1
            Layout.preferredWidth: buttonWidth
            Layout.preferredHeight: buttonHeight
            text: shifted?"P":"p"
            font.pixelSize: 25
            palette.buttonText: "white"
            onClicked: {
                buttonAddValue(text)
            }
        }
        Button
        {
            id:btnq
            // x: 178
            // y: 0
            width: buttonWidth
            height: buttonHeight
            background: Rectangle{
                border.width: 0
                color: btnAlphColor
                    }
            Layout.row:2
            Layout.column:2
            Layout.preferredWidth: buttonWidth
            Layout.preferredHeight: buttonHeight
            text: shifted?"Q":"q"
            font.pixelSize: 25
            palette.buttonText: "white"
            onClicked: {
                buttonAddValue(text)
            }
        }
        Button
        {
            id:btnr
            // x: 178
            // y: 0
            width: buttonWidth
            height: buttonHeight
            background: Rectangle{
                border.width: 0
                color: btnAlphColor
                    }
            Layout.row:2
            Layout.column:3
            Layout.preferredWidth: buttonWidth
            Layout.preferredHeight: buttonHeight
            text: shifted?"R":"r"
            font.pixelSize: 25
            palette.buttonText: "white"
            onClicked: {
                buttonAddValue(text)
            }
        }
        Button
        {
            id:btns
            // x: 178
            // y: 0
            width: buttonWidth
            height: buttonHeight
            background: Rectangle{
                border.width: 0
                color: btnAlphColor
                    }
            Layout.row:2
            Layout.column:4
            Layout.preferredWidth: buttonWidth
            Layout.preferredHeight: buttonHeight
            text: shifted?"S":"s"
            font.pixelSize: 25
            palette.buttonText: "white"
            onClicked: {
                buttonAddValue(text)
            }
        }
        Button
        {
            id:btnt
            // x: 178
            // y: 0
            width: buttonWidth
            height: buttonHeight
            background: Rectangle{
                border.width: 0
                color: btnAlphColor
                    }
            Layout.row:2
            Layout.column:5
            Layout.preferredWidth: buttonWidth
            Layout.preferredHeight: buttonHeight
            text: shifted?"T":"t"
            font.pixelSize: 25
            palette.buttonText: "white"
            onClicked: {
                buttonAddValue(text)
            }
        }
        Button
        {
            id:btnu
            // x: 178
            // y: 0
            width: buttonWidth
            height: buttonHeight
            background: Rectangle{
                border.width: 0
                color: btnAlphColor
                    }
            Layout.row:2
            Layout.column:6
            Layout.preferredWidth: buttonWidth
            Layout.preferredHeight: buttonHeight
            text: shifted?"U":"u"
            font.pixelSize: 25
            palette.buttonText: "white"
            onClicked: {
                buttonAddValue(text)
            }
        }
        Button
        {
            id:btnv
            // x: 178
            // y: 0
            width: buttonWidth
            height: buttonHeight
            background: Rectangle{
                border.width: 0
                color: btnAlphColor
                    }
            Layout.row:3
            Layout.column:0
            Layout.preferredWidth: buttonWidth
            Layout.preferredHeight: buttonHeight
            text: shifted?"V":"v"
            font.pixelSize: 25
            palette.buttonText: "white"
            onClicked: {
                buttonAddValue(text)
            }
        }
        Button
        {
            id:btnw
            // x: 178
            // y: 0
            width: buttonWidth
            height: buttonHeight
            background: Rectangle{
                border.width: 0
                color: btnAlphColor
                    }
            Layout.row:3
            Layout.column:1
            Layout.preferredWidth: buttonWidth
            Layout.preferredHeight: buttonHeight
            text: shifted?"W":"w"
            font.pixelSize: 25
            palette.buttonText: "white"
            onClicked: {
                buttonAddValue(text)
            }
        }
        Button
        {
            id:btnx
            // x: 178
            // y: 0
            width: buttonWidth
            height: buttonHeight
            background: Rectangle{
                border.width: 0
                color: btnAlphColor
                    }
            Layout.row:3
            Layout.column:2
            Layout.preferredWidth: buttonWidth
            Layout.preferredHeight: buttonHeight
            text: shifted?"X":"x"
            font.pixelSize: 25
            palette.buttonText: "white"
            onClicked: {
                buttonAddValue(text)
            }
        }
        Button
        {
            id:btny
            // x: 178
            // y: 0
            width: buttonWidth
            height: buttonHeight
            background: Rectangle{
                border.width: 0
                color: btnAlphColor
                    }
            Layout.row:3
            Layout.column:3
            Layout.preferredWidth: buttonWidth
            Layout.preferredHeight: buttonHeight
            text: shifted?"Y":"y"
            font.pixelSize: 25
            palette.buttonText: "white"
            onClicked: {
                buttonAddValue(text)
            }
        }
        Button
        {
            id:btnz
            // x: 178
            // y: 0
            width: buttonWidth
            height: buttonHeight
            background: Rectangle{
                border.width: 0
                color: btnAlphColor
                    }
            Layout.row:3
            Layout.column:4
            Layout.preferredWidth: buttonWidth
            Layout.preferredHeight: buttonHeight
            text: shifted?"Z":"z"
            font.pixelSize: 25
            palette.buttonText: "white"
            onClicked: {
                buttonAddValue(text)
            }
        }
        Button
        {
            id:btnDot1
            // x: 355
            // y: 189
            Layout.row:3
            Layout.column:5
            Layout.preferredWidth: buttonWidth
            Layout.preferredHeight: buttonHeight
            width: buttonWidth
            height: buttonHeight
            background: Rectangle{
                border.width: 0
                color: "#7080C0"
                    }

            text: "·"
            font.pixelSize: 25
            palette.buttonText: "white"
            onClicked: {
               buttonAddValue(text)
            }
        }
        Button
        {
            id:btnAt
            // x: 355
            // y: 189
            Layout.row:3
            Layout.column:6
            Layout.preferredWidth: buttonWidth
            Layout.preferredHeight: buttonHeight
            width: buttonWidth
            height: buttonHeight
            background: Rectangle{
                border.width: 0
                color: "#7080C0"
                    }

            text: "/"
            font.pixelSize: 25
            palette.buttonText: "white"
            onClicked: {
               buttonAddValue(text)
            }
        }

        Button
        {
            id:btnUnderline
            // x: 355
            // y: 189
            Layout.row:3
            Layout.column:7
            Layout.preferredWidth: buttonWidth
            Layout.preferredHeight: buttonHeight
            width: buttonWidth
            height: buttonHeight
            background: Rectangle{
                border.width: 0
                color: "#7080C0"
                    }

            text: "_"
            font.pixelSize: 25
            palette.buttonText: "white"
            onClicked: {
               buttonAddValue(text)
            }
        }
        Button
        {
            id:btnVline
            // x: 355
            // y: 189
            Layout.row:3
            Layout.column:8
            Layout.preferredWidth: buttonWidth
            Layout.preferredHeight: buttonHeight
            width: buttonWidth
            height: buttonHeight
            background: Rectangle{
                border.width: 0
                color: "#7080C0"
                    }

            text: "\\"
            font.pixelSize: 25
            palette.buttonText: "white"
            onClicked: {
               buttonAddValue(text)
            }
        }
        Button
        {
            id:btnTwo
            // x: 269
            // y: 0
            Layout.row:0
            Layout.column:8
            Layout.preferredWidth: buttonWidth
            Layout.preferredHeight: buttonHeight
            width: buttonWidth
            height: buttonHeight
            background: Rectangle{
                border.width: 0
                color: "#B0B0D0"
                    }

            text: "2"
            font.pixelSize: 25
            palette.buttonText: "white"
            onClicked: {
                buttonAddValue(text)
            }
        }
        Button
        {
            id:btnThree
            // x: 355
            // y: 0
            Layout.row:0
            Layout.column:9
            width: buttonWidth
            height: buttonHeight
            Layout.preferredWidth: buttonWidth
            Layout.preferredHeight: buttonHeight
            background: Rectangle{
                border.width: 0
                color: "#B0B0D0"
                    }

            text: "3"
            font.pixelSize: 25
            palette.buttonText: "white"
            onClicked: {
                buttonAddValue(text)
            }
        }
        Button
        {
            id:btnClear
            // x: 440
            // y: 0
            Layout.row:0
            Layout.column:11
            Layout.preferredWidth: buttonWidth
            Layout.preferredHeight: buttonHeight
            width: buttonWidth
            height: buttonHeight
            background: Rectangle{
                border.width: 0
                color: "#C070B0"
                    }

            text: "C"
            font.pixelSize: 25
            palette.buttonText: "white"
            onClicked: {
                buttonClean()
            }
        }
        Button
        {
            id:btnShift
            // x: 440
            // y: 0
            Layout.row:3
            Layout.column:10
            Layout.columnSpan: 2
            Layout.preferredWidth: 120
            Layout.preferredHeight: buttonHeight
            width: buttonWidth
            height: buttonHeight
            background: Rectangle{
                border.width: 0
                color: "#C070B0"
                    }

            text: "Shift"
            font.pixelSize: 25
            palette.buttonText: "white"
            onClicked: {
                shifted=!shifted
            }
        }
        Button
        {
            id:btnColon
            // x: 440
            // y: 0
            Layout.row:3
            Layout.column:9
            Layout.preferredWidth: buttonWidth
            Layout.preferredHeight: buttonHeight
            width: buttonWidth
            height: buttonHeight
            background: Rectangle{
                border.width: 0
                color: "#C070B0"
                    }

            text: ":"
            font.pixelSize: 25
            palette.buttonText: "white"
            onClicked: {
                buttonAddValue(text)
            }
        }
        Button
        {
            id:btnFour
            // x: 178
            // y: 61
            Layout.row:1
            Layout.column:7
            Layout.preferredWidth: buttonWidth
            Layout.preferredHeight: buttonHeight
            width: buttonWidth
            height: buttonHeight
            background: Rectangle{
                border.width: 0
                color: "#B0B0D0"
                    }

            text: "4"
            font.pixelSize: 25
            palette.buttonText: "white"
            onClicked: {
                buttonAddValue(text)
            }
        }
        Button
        {
            id:btnFive
            // x: 269
            // y: 61
            Layout.row:1
            Layout.column:8
            Layout.preferredWidth: buttonWidth
            Layout.preferredHeight: buttonHeight
            width: buttonWidth
            height: buttonHeight
            background: Rectangle{
                border.width: 0
                color: "#B0B0D0"
                    }

            text: "5"
            font.pixelSize: 25
            palette.buttonText: "white"
            onClicked: {
                buttonAddValue(text)
            }
        }
        Button
        {
            id:btnSix
            // x: 355
            // y: 61
            Layout.row:1
            Layout.column:9
            width: buttonWidth
            height: buttonHeight
            Layout.preferredWidth: buttonWidth
            Layout.preferredHeight: buttonHeight
            background: Rectangle{
                border.width: 0
                color: "#B0B0D0"
                    }

            text: "6"
            font.pixelSize: 25
            palette.buttonText: "white"
            onClicked: {
                buttonAddValue(text)
            }
        }

        Button
        {
            id:btnDel
            // x: 440
            // y: 61
            Layout.row:1
            Layout.column:11
            Layout.rowSpan: 2
            Layout.preferredWidth: buttonWidth
            Layout.preferredHeight: 120
            background: Rectangle{
                border.width: 0
                color: "#7080C0"
                    }

            text: "←"
            font.pixelSize: 25
            palette.buttonText: "white"
            onClicked: {
                buttonDel()
            }
        }
        Button
        {
            id:btnSeven
            // x: 178
            // y: 124
            Layout.row:2
            Layout.column:7
            width: buttonWidth
            height: buttonHeight
            Layout.preferredWidth: buttonWidth
            Layout.preferredHeight: buttonHeight
            background: Rectangle{
                border.width: 0
                color: "#B0B0D0"
                    }

            text: "7"
            font.pixelSize: 25
            palette.buttonText: "white"
            onClicked: {
                buttonAddValue(text)
            }
        }
        Button
        {
            id:btnEight
            // x: 269
            // y: 124
            Layout.row:2
            Layout.column:8
            width: buttonWidth
            height: buttonHeight
            Layout.preferredWidth: buttonWidth
            Layout.preferredHeight: buttonHeight
            background: Rectangle{
                border.width: 0
                color: "#B0B0D0"
                    }

            text: "8"
            font.pixelSize: 25
            palette.buttonText: "white"
            onClicked: {
                buttonAddValue(text)
            }
        }
        Button
        {
            id:btnNine
            // x: 355
            // y: 124
            Layout.row:2
            Layout.column:9
            width: buttonWidth
            height: buttonHeight
            Layout.preferredWidth: buttonWidth
            Layout.preferredHeight: buttonHeight
            background: Rectangle{
                border.width: 0
                color: "#B0B0D0"
                    }

            text: "9"
            font.pixelSize: 25
            palette.buttonText: "white"
            onClicked: {
                buttonAddValue(text)
            }
        }

//        Button
//        {
//            id:btnEnter
//            // x: 440
//            // y: 124
//            //width: buttonWidth
//            //height: 116
//            background: Rectangle{
//                border.width: 0
//                color: "#C070B0"
//                    }
//            Layout.row:2
//            Layout.column:4
//            Layout.rowSpan: 2
//            Layout.preferredWidth: buttonWidth
//            Layout.preferredHeight: 126
//            text: "↵"
//            font.pixelSize: 25
//            palette.buttonText: "white"
//            onClicked: {
//                buttonInputDone()
//            }
//        }
        Button
        {
            id:btnMinus
            // x: 178
            // y: 186
            Layout.row:0
            Layout.column:10
            width: buttonWidth
            height: buttonHeight
            Layout.preferredWidth: buttonWidth
            Layout.preferredHeight: buttonHeight
            background: Rectangle{
                border.width: 0
                color: "#7080C0"
                    }

            text: "-"
            font.pixelSize: 25
            palette.buttonText: "white"
            onClicked: {
                buttonMinus()
            }
        }
        Button
        {
            id:btnZero
            // x: 269
            // y: 190
            width: buttonWidth
            height: buttonHeight
            background: Rectangle{
                border.width: 0
                color: "#B0B0D0"
                    }
            Layout.row:1
            Layout.column:10
            Layout.preferredWidth: buttonWidth
            Layout.preferredHeight: buttonHeight
            text: "0"
            font.pixelSize: 25
            palette.buttonText: "white"
            onClicked: {
                buttonAddValue(text)
            }
        }
        Button
        {
            id:btnDot
            // x: 355
            // y: 189
            Layout.row:2
            Layout.column:10
            Layout.preferredWidth: buttonWidth
            Layout.preferredHeight: buttonHeight
            width: buttonWidth
            height: buttonHeight
            background: Rectangle{
                border.width: 0
                color: "#7080C0"
                    }

            text: "."
            font.pixelSize: 25
            palette.buttonText: "white"
            onClicked: {
                buttonDot()
            }
        }

    }
}
